<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="assets/css/map.css" rel="stylesheet">
		<link href="assets/css/leaflet.css" rel="stylesheet">
		<title>leaflet</title>
		<style>
			.marker-cluster-small,
			.marker-cluster-medium,
			.marker-cluster-large {
				width: 30px !important;
				height: 30px !important;
				background: #fff;
				border: 1px solid #333;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

			}
		</style>
	</head>

	<body>

		<div id="map"></div>

		<script src="assets/js/leaflet.js"></script>
		<script src="assets/js/leaflet.markercluster-src.js"></script>
		<script src="data/data2.js"></script>
		<script>
			let map = L.map("map", {
				zoom: 12,
				maxZoom: 18,
				center: [34.269701076858354, 108.94729614257814],
			});
			L.tileLayer(
				"http://{s}.tile.osm.org/{z}/{x}/{y}.png"
			).addTo(map);
			const markers = L.markerClusterGroup({
				showCoverageOnHover: true, // 当鼠标悬停在集群上时，会显示其标记的范围。
				zoomToBoundsOnClick: true, // 点击集群时，我们将缩放至其边界。
				removeOutsideVisibleBounds: true, //远离视口的集群和标记为了性能而从地图中删除
			});
			for (let i = 0; i < path.length; i++) {
				const item = path[i];
				const icon = L.icon({
					iconUrl: "assets/img/marker_icon.png",
					iconSize: [15, 25],
				});
				const marker = L.marker([item[0], item[1]], {
					icon: icon,
					title: item[2]
				});
				marker.bindPopup(item[2]);
				markers.addLayer(marker);
			}
			map.addLayer(markers);
			map.fitBounds(path);
		</script>
	</body>

</html>